<!-- <template>

    <div style="position: relative;" 
        @mouseenter="() => { if (props.topWhileHover) { zindex = 25600 } }" @mouseleave="() => { zindex = item.zindex }"
        @click="()=>{
        $emit('click')
        room.pushZIndexList(props.item.id)
        }"
        >
        <VueDragResize :h="24" :w="24"  aspectRatio :z="zindex" :isResizable="false" :x="item.x" :y="item.y" @dragging="syncLocation">
            <div>
                <v-icon :icon="mdiDragVariant"></v-icon>
            </div>
        </VueDragResize>
        <div style="position: absolute;" :style="`top:${item.y - 2}px;left:${item.x - 2}px;z-index:${zindex - 1};`">
            <slot></slot>
        </div>
    </div>

</template>

<script setup lang="ts">
import tableItem from '@/ts/tableItem';
import { computed, getCurrentInstance, ref, watch } from 'vue';
import VueDragResize from 'vue-drag-resize/src';
import { mdiDragVariant } from '@mdi/js'
import { useRoom } from '@/stores/room';

const props = defineProps<{
    unDragAble?:boolean,
    topWhileHover?:boolean,
    item:tableItem
}>()
const emit = defineEmits<{
    click:[],
}>()
const room = useRoom()

watch(() =>props.item.zindex, (newValue, oldValue) => {
    zindex.value = newValue
})

const zindex = ref(props.item.zindex)

function syncLocation(data: { left: number, top: number }) {
    console.log(syncLocation+"x:"+data.left+"y:"+data.top);
    
    props.item.x = data.left
    props.item.y = data.top
}

</script>
<style scoped></style> -->